<script setup>
import { reactive, ref } from 'vue';
import * as api from '@/api/public';
import moment from 'moment';

const depts = reactive([])

let search = ref('')

let selected = ref('')

let createTimeStart = ref('')
let createTimeEnd = ref('')

const init = () => {
    api.getData({
        page: 1,
        size : 10
    }, '/dept').then( res => {
        depts.push(...res.data)
    })
}

init()

const emits = defineEmits(['query'])

const query = () => {
    emits('query', {
        search: search.value,
        deptId: selected.value,
        createTimeStart: createTimeStart.value ? moment(createTimeStart.value).format('yyyy-MM-DD HH:mm:ss') : '',
        createTimeEnd: createTimeEnd.value ? moment(createTimeEnd.value).format('yyyy-MM-DD HH:mm:ss') : '',
        page: 1,
        size : 10
     })
}

</script>
<template>
    <div class="component-box">
        <div class="left">
            <div class="item">
                <span>部门：</span>
                <el-select v-model="selected" placeholder="选择部门" style="width: 240px">
                    <el-option
                        v-for="item in depts"
                        :key="item.deptId"
                        :label="item.name"
                        :value="item.deptId"
                    />
                </el-select>
            </div>
            <div class="item">
                <span>创建时间：</span>
                <el-date-picker
                    v-model="createTimeStart"
                    type="datetime"
                    placeholder="开始"
                /> -
                <el-date-picker
                    v-model="createTimeEnd"
                    type="datetime"
                    placeholder="结尾"
                />
            </div>
            <div class="item">
                <el-input v-model="search"
                    placeholder="请输入内容"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="right">
            <el-button type="primary" @click="query">搜索</el-button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.component-box{
    display: flex;
    margin-bottom: 12px;
    padding: 10px 10px 0;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    .left{
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item{
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
    .right{
        display: flex;
        flex: 0.2;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 10px;
    }
}
</style>
